<template>
    <view class="container">
        <view class="user">
            <!-- #ifdef MP-WEIXIN -->
                <view class="left">
                    <!-- 如果能获取存储的登录信息就数据库的昵称 -->
                    <view class="nickname" v-if="Object.getOwnPropertyNames(business).length > 0">
                        {{business.nickname}}
                    </view>

                    <!-- 如果没有获取到就会显示微信昵称 -->
                    <open-data v-else type="userNickName" class="nickname"></open-data>
                </view>
                <view class="right">
                    <view class="avatar xcx">
                        <uv-avatar :src="business.avatar_cdn" size="90" v-if="Object.getOwnPropertyNames(business).length > 0"></uv-avatar>

                        <!-- 如果没有获取到就会显示微信头像 -->
                        <open-data type="userAvatarUrl" v-else></open-data>
                    </view>
                </view>
            <!-- #endif -->

            <!-- Web和APP -->
			<!--  #ifdef WEB || APP-PLUS -->
            <view class="left">
                    <view class="nickname" v-if="Object.getOwnPropertyNames(business).length > 0">
                        {{business.nickname}}
                    </view>
                    <view class="nickname" v-else>
                        请选登陆
                    </view>
                    <view class="email" v-if="Object.getOwnPropertyNames(business).length > 0">
                        {{business.email ? business.email : business.mobile_text}}
                    </view>
                </view>
                <view class="right">
                    <view class="avatar">
                        <uv-avatar :src="business.avatar_cdn" size="90" v-if="JSON.stringify(business) != '{}'"></uv-avatar>
                        <uv-avatar src="/static/avatar.jpg" size="90" v-else></uv-avatar>
                    </view>
                </view>
			<!-- #endif -->
        </view>

        <!-- 菜单 对象不为空就说明有登录-->
        <view class="menu" v-if="Object.getOwnPropertyNames(business).length > 0">
            <view class="item" hover-class="checkActive" @click="ToProduct">
				<view class="title">产品防伪管理</view>
				<uv-icon name="arrow-right"></uv-icon>
			</view>

			<!--  #ifdef MP-WEIXIN -->
			<view class="item" hover-class="checkActive" @click="UnbindRef.open()">
				<view class="title">解除绑定账号</view>
				<uv-icon name="arrow-right"></uv-icon>
			</view>
			<!-- #endif -->

            <view class="item" hover-class="checkActive" @click="LogoutRef.open()">
                <view class="title">退出账号</view>
                <uv-icon name="arrow-right"></uv-icon>
            </view>
        </view>


        <view class="actions">
			<!-- #ifdef MP-WEIXIN -->
			<view class="login" v-if="Object.getOwnPropertyNames(business).length === 0">
				<uv-button type="primary" icon="weixin-circle-fill" @click="OnLogin">微信一键登陆</uv-button>
			</view>
			<!-- #endif -->

			<!-- Web和APP -->
			<!--  #ifdef WEB || APP-PLUS -->
			<view class="login" v-if="Object.getOwnPropertyNames(business).length === 0">
				<uv-button type="primary" @click="ToLogin">登陆帐号</uv-button>
			</view>
			<!-- #endif -->
		</view>
    </view>

    <!-- 确认对话框 -->
    <uv-modal ref="LogoutRef" title="退出账号" content="是否确认退出当前账号？" :showCancelButton="true" @confirm="OnLogout" @cancel="LogoutRef.close()"></uv-modal>

    <!-- #ifdef MP-WEIXIN -->
	<!-- 解除绑定账号 -->
	<uv-modal ref="UnbindRef" title="解除绑定" content="是否确认解除账号绑定？" :showCancelButton="true" @confirm="OnConfirmUnbind" @cancel="UnbindRef.close()"></uv-modal>
    <!-- #endif -->

    <uv-toast ref="NoticeRef"></uv-toast>
</template>
<script setup>
const { proxy } = getCurrentInstance();
const business = ref({});
const NoticeRef = ref(null);
const LogoutRef = ref(null);
const UnbindRef = ref(null);

console.log(business.value);

// 当页面显示屏幕时的生命周期
onShow(() =>
{
    business.value = uni.getStorageSync('business') ? uni.getStorageSync('business') : {};
});

// #ifdef MP-WEIXIN
const OnLogin = () =>
{
    uni.login({
        provider:'weixin',
        success:(res) =>
        {
            const code = res?.code ? res.code : '';

            if(!code)
            {
                NoticeRef.value.show({
                    type:'error',
                    message:'获取临时凭证失败'
                });

                return false;
            }

            // 调用uni的api 懒加载
            uni.showLoading({
                title:'登录中',
                mask:true,
                success:async () =>
                {
                    // 延时一定时间，注意：生产环境可能因为各种因素导致时间会加长
                    await uni.$uv.sleep(1000);

                    const result = await uni.$uv.http.post('/business/wx_login',{code});

                    uni.hideLoading();

                    if(result.code === 1)
                    {
                        NoticeRef.value.show({
                            type:'success',
                            message:result.msg,
                            complete:() =>
                            {
                                uni.setStorageSync('business',result.data);

                                business.value = result.data;
                                proxy.$business.value = result.data;
                            }
                        });
                    }else{
                        const openid = result.data?.openid;

                        NoticeRef.value.show({
                            type:'error',
                            message:result.msg,
                            complete:() =>
                            {
                                if(openid)
                                {
                                    uni.navigateTo({
                                        url:`/pages/business/bind?openid=${openid}`
                                    });
                                }
                            }
                        });
                    }
                }
            });
            
        }
    })
    
}
// #endif

// #ifndef MP
const ToLogin = () => uni.$uv.route('/pages/business/login');
// #endif

const ToProduct = () => proxy.$uv.route('/pages/business/product');

const OnLogout = () =>
{
    NoticeRef.value.show({
        type:'success',
        message:'退出当前账号成功',
        complete:() =>
        {
            uni.removeStorageSync('business');
            business.value = {};
            proxy.$business.value = {};
        }
    });
}

// #ifdef MP-WEIXIN
const OnConfirmUnbind = async () =>
{
    const params = {
        id:business.value.id,
        openid:business.value.openid
    }

    const result = await uni.$uv.http.post('/business/unbinding',params);

    if(result.code === 1)
    {
        NoticeRef.value.show({
            type:'success',
            message:result.msg,
            complete:() =>
            {
                uni.removeStorageSync('business');
                business.value = {};
                proxy.$business = {};
            }
        });
    }else{
        NoticeRef.value.show({
            type:'error',
            message:result.msg
        });
    }
}
// #endif

</script>

<style>
page{
    background-color: #eee;
}

.container{
    width: 95%;
    margin: 0 auto;
}

.user{
    display: flex;
    padding: 40px;
    background-color: #fff;
    margin-top: 10px;
    border-radius: 10px;
}

/* #ifdef H5  */
.user {
    align-items: center;
}
/* #endif */

.user .left {
    flex: 3;
}

/* 条件编译 */
/* #ifdef MP-WEIXIN  */
.user .left {
    flex: 3;
    display: flex;
    align-items: center;
    align-content: center;
}
/* #endif */


.user .right {
    flex: 1
}

.user .right .xcx {
    width: 200rpx;
    height: 200rpx;
    border-radius: 100%;
    overflow: hidden;
}

.user .left .nickname {
    font-size: 26px;
    font-weight: bold;
}

.actions {
    display: flex;
    padding: 20px 40rpx;
}

.login {
    flex: 1;
}

.menu{
    background-color: #fff;
    margin-top: 10px;
}

.menu .item{
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
    padding: 10px 10px;
    font-size: 14px;
}

.checkActive{
    background-color: rgba(233, 233, 233, 0.5);
}
</style>